<template>
  <div class="userIndex">
    <div class="info_tab_top">
      <div class="user_item" @click="$router.push({name: 'ucenter'})">
        <div class="icons">
          <img v-if="$route.meta.type != 'user'" src="../../assets/personal-black-info.png">
          <img v-else src="../../assets/personal-red-info.png">
        </div>
        <div>个人信息</div>
      </div>
      <div class="user_item" @click="$router.push({name: 'orderList'})">
        <div class="icons" >
          <img v-if="$route.meta.type != 'order'" src="../../assets/personal-black-order@2x.png">
          <img v-else src="../../assets/personal-red-order@2x.png">
        </div>
        <div>我的订单</div>
      </div>
      <div class="user_item" @click="$router.push({name: 'quotation'})">
        <div class="icons">
          <img v-if="$route.meta.type != 'offer'" src="../../assets/personal-black-offer@2x.png">
          <img v-else src="../../assets/personal-red-offer@2x.png">
        </div>
        <div>我的报价</div>
      </div>
      <div class="user_item" @click="$router.push({name: 'integral'})">
        <div class="icons">
          <img v-if="$route.meta.type != 'integral'" src="../../assets/personal-black-integral@2x.png">
          <img v-else src="../../assets/personal-red-integral@2x.png">
        </div>
        <div>我的积分</div>
      </div>
      <div class="user_item" @click="$router.push({name: 'address'})">
        <div class="icons">
          <img v-if="$route.meta.type != 'address'" src="../../assets/personal-black-address@2x.png">
          <img v-else src="../../assets/personal-red-address@2x.png">
        </div>
        <div>收货地址</div>
      </div>
      <div class="user_item" @click="$router.push({name: 'invoice'})">
        <div class="icons">
          <img v-if="$route.meta.type != 'invoice'" src="../../assets/personal-black-invoice@2x.png">
          <img v-else src="../../assets/personal-red-invoice@2x.png">
        </div>
        <div>发票抬头</div>
      </div>
    </div>
    <div class="content_box">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
name: "Index"
}
</script>

<style scoped lang="less">
  .userIndex{
    width: 1200px;
    margin: 0 auto;
    min-height:(100vh - 60px);
    padding:20px 0 40px;
    cursor: pointer;
    .info_tab_top{
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      .user_item{
        display: flex;
        align-items: center;
        margin-right: 40px;
        .icons{
          width:25px;
          height:25px;
          margin-right: 10px;
          img{
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }
    .content_box{
      width: 100%;
      height: auto;
    }
  }
</style>
